<template>
<!-- 用户反馈 begin -->
<div class="main main-school" id="main_user_feedback">
	<div class="main-hd">
		<h2>用户反馈</h2>
	</div>
	<div id="vueTest" class="main-bd">
		<div class="content-wrap">
			<p class="form form-inline">
				<input type="text" class="form-control mr20" v-model="phone" placeholder="账户" />
				<DatePicker type="daterange" format="yyyy-MM-dd" v-model="testTime" :options="disDate" @on-change="timeChange" placeholder="反馈时间" style="width: 200px"></DatePicker>
			</p>
			<!-- 商户列表 begin -->
			<div style="margin-top: 15px;">
				<div>
					<table class="table table-hover table-condensed" border>
						<thead><tr>
							<td width="100">序号</td>
							<td width="100">账户</td>
							<td>反馈描述</td>
							<td width="150">反馈时间</td>
						</tr></thead>
						<tr v-for="(item,index) in feedbackList">
							<td>{{index+1}}</td>
							<td>{{item.phone}}</td>
							<td>{{item.content}}</td>
							<td>{{item.submitTime | getLocalTime}}</td>
						</tr>
					</table>
				</div>
			</div>
			
			<div style="float: right;margin-top:20px;text-align: right;">
				<!-- <span class="kkpager_totalSize">共有{{loan_list_size}}条数据</span> -->
				<Page
					:total="loan_list_size"
					:page-size-opts="[10, 20, 40, 80, 100]"
					show-total
					show-elevator
					show-sizer
					@on-change="pageChange"
					@on-page-size-change="handleSizeChange"
					style="margin: 15px 0;"></Page>
			</div>
		<!-- 商户列表 end -->
		</div>
	</div>
</div>
<!-- 用户反馈 end -->
</template>

<script>
export default{
	data(){
		return{
			testTime: ['', ''],
			phone:'',
			beginDate:'',
			endDate:'',
			feedbackList:[],
			loan_list_size: 1,
			loan_list_page: 1,
			loading: true,
			disDate: {
				disabledDate (date) {
					return date && date.valueOf() > Date.now();
				}
			},
			pageSize: 10
		}
	},
	methods:{
		getFeedback(page) {
			var _this = this;
			var param = {};
			param.pageIndex = page || 1;
			param.pageSize = this.pageSize;
			param.phone = _this.phone;
			param.beginDate = _this.beginDate;
			param.endDate = _this.endDate;
			this.$http.post('/helsinki/admin/basic/getFeedBack', param)
			.then(function(res) {
	    	if (res.data.errcode == 0) {
					_this.feedbackList = res.data.data.list;
					_this.loan_list_size = res.data.data.size;
					_this.loan_list_page = param.pageIndex;
					_this.loading = false;
	    	}
	    }, function(res) {
				// _self.$Message.info(res.data.info);
			});
		},
		timeChange(e){
			if(typeof(e)=="undefined"){
				this.beginDate = e[0];
			}else if(typeof(e)=="object"){
				this.beginDate = e[0];
				this.endDate = e[1];
			}
			this.getFeedback();
		},
		pageChange(e){
			this.getFeedback(e);
		},
		// 每页条数
		handleSizeChange (val) {
			this.pageSize = val;
			this.getFeedback();
		}
	},
	mounted:function(){
		this.getFeedback();
	},
	watch:{
		phone:function(){
			this.getFeedback();
		}
	}
}
</script>

<style>
	@import '../static/style.css';
</style>